<template>
  <div class="el-header-size">
    <el-cascader
      :options="initProductOption"
      v-model="productValue"
      style="width:250px;"
      expand-trigger="hover"
      @change="productChange"
    />
    <el-select
      v-model="basemapValue"
      placeholder="请设置底图"
      style="float:right;width:250px"
      @change="basemapChange"
    >
      <el-option
        v-for="item in basemapOption"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
import { compareArraysEqual } from '@/utils/cinrad'
export default {
  name: 'RadarSelect',
  props: {
    logName: {
      type: String,
      default: 'RadarSelect:'
    },
    initProductValue: {
      type: Array,
      default: function() {
        return ['Z9200', '19', '2']
      }
    },
    initDefaultProduct: {
      type: String,
      default: '0'
    },
    initProductOption: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      productValue: this.initProductValue,
      defaultProduct: this.initDefaultProduct,

      basemapOption: this.appOptions.basemapOption,
      basemapValue: this.appOptions.basemapOption[0].value
    }
  },
  watch: {
    // 如果 `initProductValue` 发生改变，这个函数就会运行
    initProductValue: function(newProduct, oldProduct) {
      console.debug(
        this.logName +
          'initProductValue Change:' +
          newProduct +
          ':' +
          oldProduct
      )
      if (!compareArraysEqual(newProduct, this.productValue)) {
        this.productValue = newProduct
      } else {
        console.debug(
          this.logName +
            'initProductValue Change: newProduct===this.productValue'
        )
      }
    }
  },
  methods: {
    productChange(val) {
      console.debug(this.logName + 'productChange:' + val)
      this.$emit('product_change', val)
    },
    basemapChange(val) {
      console.debug(this.logName + 'basemapChange:' + val)
      this.$emit('basemap_change', val)
    }
  }
}
</script>

<style scoped>
.el-header-size {
  height: 36px;
  width: 100%;
}
</style>
